<template>
  <section>
      <div class="bii-box-section">
            <div class="bd-head">
                <div class="head-price">
                    <div class="box">
                        <div class="num">{{ money.money }}</div>
                        <div>账户余额（元）</div>
                    </div>
                    <i class="line"></i>
                    <div class="box">
                        <div class="num">{{ money.waitSettleMoney }}</div>
                        <div>待结算（元）</div>
                    </div>
                </div>
                <div>
                    <el-button size="mini" type="primary" @click="handleWithdraw">提现</el-button>
                </div>
                <el-alert
                    style="width: 319px; margin: 13px 0px 8px;"
                    :title="getTip()"
                    type="error">
                </el-alert>
                <div class="bind-card">
                        <template v-if="agencyInfo.bank">
                            <div class="bank-msg">
                                    {{ agencyInfo.bank }}
                                    <div class="num">{{ agencyInfo.bankAccount }}</div>
                            </div>
                            <el-button size="mini" type="primary" @click="tipBank">更换绑定</el-button>
                        </template>
                        <template v-else>
                            <div class="bank-msg">绑定银行卡后才可提现</div>
                            <el-button size="mini" type="primary" @click="bindBank">立即绑定</el-button>
                        </template>
                </div>
            </div>
            
            <el-form :inline="true" :model="listQuery" style="margin-top:20px;">
                <el-form-item label="">
                    <el-date-picker
                        value-format="yyyy-MM-dd"
                        size="mini"
                        v-model="date"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <el-select class="w100" size="mini" v-model="listQuery.type" placeholder="提现状态" clearable>
                        <el-option label="申请中" value="0"></el-option>
                        <el-option label="已通过" value="1"></el-option>
                        <el-option label="已拒绝" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input size="mini" placeholder="流水号" v-model="listQuery.orderNo" />
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" type="primary" @click="handleFilter">查询</el-button>
                </el-form-item>
            </el-form>

            <el-table ref="dataTable" :data="list" style="width: 100%">
                <el-table-column align="left" label="流水号" width="180">
                    <template slot-scope="scope">
                        <span>{{scope.row.orderNo}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="申请时间" width="150">
                    <template slot-scope="scope">
                        <span>{{scope.row.createTime}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="处理时间" width="150">
                    <template slot-scope="scope">
                        <span>{{scope.row.updateTime}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="账户名">
                    <template slot-scope="scope">
                        <span>{{scope.row.withdrawHost}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="开户行">
                    <template slot-scope="scope">
                        <span>{{scope.row.withdrawName}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="账户">
                    <template slot-scope="scope">
                        <span>{{scope.row.withdrawAccount}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="right" label="申请金额" width="100">
                    <template slot-scope="scope">
                        <span>￥{{scope.row.moneyApply}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="right" label="到账金额" width="100">
                    <template slot-scope="scope">
                        <span>￥{{scope.row.money}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="right" label="状态" width="200">
                    <template slot-scope="scope">
                        <span>{{scope.row.statusText}}</span>
                        <p v-if="scope.row.reason" style="color:red;">{{ scope.row.reason }}</p>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum" :page-sizes="[20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
            </div>
        </div>

        <el-dialog title="绑定银行卡" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="500px" @close="dialogClose">
            <el-form :model="form" ref="form" :rules="rules" label-width="100px">
                <el-form-item label="开户行" prop="bank">
                    <common-input placeholder="请输入开户行" v-model="form.bank" />
                </el-form-item>
                <el-form-item label="开户名" prop="bankHost">
                    <common-input placeholder="请输入开户名" v-model="form.bankHost" />
                </el-form-item>
                <el-form-item label="银行卡号" prop="bankAccount">
                    <common-input placeholder="请输入银行卡号" v-model="form.bankAccount" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="cancel('form')">取消</el-button>
                <el-button :loading="checkLoading" size="mini" type="primary" @click="check('form')">确定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="提现" :visible.sync="dialogWithdrawVisible" :close-on-click-modal="false" width="500px">
            <el-form :model="withdrawForm" ref="withdrawForm" :rules="withdrawRules" label-width="100px">
                <el-form-item label="提现金额" prop="money">
                    <el-input size="mini" type="number" placeholder="请输入提现金额" v-model="withdrawForm.money" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogWithdrawVisible=false">取消</el-button>
                <el-button :loading="applyLoading" size="mini" type="primary" @click="apply()">确定</el-button>
            </div>
        </el-dialog>
  </section>
</template>

<script>
    import {
        agency_money,
        agency_info,
        agency_update_bank,
        agency_withdraw_apply,
        agency_withdraw_list
    } from '../../api/agency';
    export default {
        components: {
        },
        data() {
            return {
                applyLoading: false,
                dialogWithdrawVisible: false,
                withdrawForm: {
                    money: undefined,
                },
                rules: {
                    bank: [
                        {
                            required: true,
                            message: '请输入开户行',
                            trigger: 'blur'
                        }
                    ],
                    bankHost: [
                        {
                            required: true,
                            message: '请输入开户名',
                            trigger: 'blur'
                        },
                    ],
                    bankAccount: [
                        {
                            required: true,
                            message: '请输入银行卡号',
                            trigger: 'blur'
                        },
                    ],
                },
                withdrawRules: {
                    money: [
                        {
                            required: true,
                            message: '请输入提现金额',
                            trigger: 'blur'
                        }
                    ],
                },
                dialogFormVisible: false,
                form: {
                    bank: undefined,
                    bankHost: undefined,
                    bankAccount: undefined,
                },
                checkLoading: false,
                listQuery: {
                    startDate: undefined,
                    endDate: undefined,
                    type: undefined,
                    pageNum: 1,
                    pageSize: 20,
                    orderNo: undefined
                },
                list: [],
                total: 0,
                date: undefined,
                money: {
                    money: 0,
                    settledMoney: 0,
                    waitSettleMoney: 0,
                },
                agencyInfo: {
                    bank: undefined,
                    bankAccount: undefined,
                    bankHost: undefined,
                }
            }
        },
        mounted() {
        
        },
        created() {
            this.handleFilter();
            this.getMoney();
            this.getAgencyInfo();
        },
        methods: {
            dialogClose() {
                this.$refs.form.resetFields();
            },
            cancel(formName) {
                this.dialogFormVisible = false;
                this.$refs[formName].resetFields();
            },
            check(formName) {
                const set = this.$refs;
                set[formName].validate(valid => {
                    if (valid) {
                        this.checkLoading = true;
                        agency_update_bank(this.form).then((res)=>{
                            this.checkLoading = false;
                            this.$message.success("银行卡信息已更新");
                            this.getAgencyInfo();
                            this.dialogFormVisible = false;
                        }).catch((err)=>{
                            this.checkLoading = false;
                        })
                    } else {
                        return false;
                    }
                });
            },
            handleFilter() {
                this.listQuery.pageNum = 1;
                this.getList();
            },
            handleSizeChange(val) {
                this.listQuery.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.pageNum = val;
                this.getList();
            },
            getList() {
                if(this.date) {
                    this.listQuery.startDate = this.date[0];
                    this.listQuery.endDate = this.date[1];
                } else {
                    this.listQuery.startDate = undefined;
                    this.listQuery.endDate = undefined;
                }

                agency_withdraw_list(this.listQuery).then((response)=>{
                    this.list = response.data.list;
                    this.total = response.data.total;

                }).catch((err)=>{
                    
                })
            },
            getMoney() {
                agency_money().then((res)=>{
                    this.money = res.data
                }).catch((err)=>{

                })
            },
            getTip() {
                return "每月" + this.money.withdrawStartDay + "~" + this.money.withdrawEndDay + "日可申请提现，每月提现次数限制" + this.money.withdrawPerMonth + "次";
            },
            getAgencyInfo() {
                agency_info().then((res)=>{
                    this.agencyInfo = res.data;

                    this.form.bank = this.agencyInfo.bank;
                    this.form.bankHost = this.agencyInfo.bankHost;
                    this.form.bankAccount = this.agencyInfo.bankAccount;
                }).catch((err)=>{

                })
            },
            bindBank() {
                this.dialogFormVisible = true;
            },
            tipBank() {
                this.$message.error("请联系官方修改提现银行卡信息");
            },
            handleWithdraw() {
                this.withdrawForm.money = undefined;
                this.dialogWithdrawVisible = true;
            },
            apply() {

                const set = this.$refs;
                set["withdrawForm"].validate(valid => {
                    if (valid) {
                        this.$confirm('确定提交提现申请?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            })
                                .then(() => {
                                    this.applyLoading = true;
                                    agency_withdraw_apply(this.withdrawForm).then((res)=>{
                                        this.applyLoading = false;
                                        this.$message.success("提现申请已提交");
                                        this.getAgencyInfo();
                                        this.getMoney();
                                        this.getList();
                                        this.dialogWithdrawVisible = false;
                                    }).catch((err)=>{
                                        this.applyLoading = false;
                                    })
                                }).catch(()=>{});
                    } else {
                        return false;
                    }
                });

            }
        }
    };
</script>
<style lang="scss" scoped>
    .bii-box-section {
        // padding: 80px;
        height: 100%;
        background: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: auto;

        .bd-head {
            position: relative;

            .head-price {
                font-size: 14px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                line-height: 16px;
                text-align: center;
                margin-bottom: 30px;

                .num {
                    font-size: 34px;
                    line-height: 36px;
                }

                .line {
                    height: 66px;
                    width: 1px;
                    background: #d8d8d8;
                    margin: 0 75px;
                }
            }
        }

        .bind-card {
            position: absolute;
            top: 0;
            right: 80px;
            border-radius: 4px;
            background: rgba(36,97,241,.05);
            padding: 34px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            font-size: 16px;

            .bank-msg {
                margin-right: 34px;

                .num {
                    font-size: 14px;
                    color: #666;
                    line-height: 18px;
                }
            }
        }
    }
</style>
